<template>
  <el-dialog
    title='选择邮件模板'
    :close-on-click-modal="false"
    :visible.sync="show"
    :append-to-body="true"
    @open="getInit"
    :before-colse="handleClose"
    top="5vh"
    width="75%"
    >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="我的模板" name="first">
        <el-scrollbar :wrap-class="{wrapClass: true}" class="dialog-scrollbar">
          <div v-for="item in templateOptions" :key="item.key" style="text-align:center;display:inline-block;">
            <el-radio border v-model="templateRadio" :label="item.key"  style="width:220px;height:220px;margin:10px 5px;padding:10px;">
              <el-card class="box-card">
                <template v-if="item.imageURL">
                  <img :src="item.imageURL" style="width:150px;height:100px;" alt="">
                </template>
                <template v-else>
                  <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" style="width:150px;height:100px;" alt="">
                </template>
              </el-card>
              <p style="text-align:center;">
                <!-- <el-popover
                  placement="top-start"
                  width="200"
                  trigger="click"
                  :content="item.displayName"
                  ref="popover-title"/>
                <template v-popover:popover-title> -->
                  {{ getTitle(item.displayName) }}
                <!-- </template> -->
                <el-button @click="preview(item)" :key="item.key" type="success" size="mini" style="float:right;margin-top:-7px;" icon="el-icon-view" circle></el-button>
                <el-image-viewer v-if="showViewer"
                :on-close="() => {
                    showViewer=false
                  }"
                  :url-list="urlList" />
              </p>
            </el-radio>
          </div>
        </el-scrollbar>
      </el-tab-pane>
      <!-- <el-tab-pane label="系统模板" name="second">系统模板</el-tab-pane>
      <el-tab-pane label="分享给我的" name="second1">分享给我的</el-tab-pane> -->
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">取 消</el-button>
      <el-button type="success" plain @click="handleSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { getAction } from '@/api/common'
import storage from '@/utils/storage'
import elImageViewer from 'element-ui/packages/image/src/image-viewer'

export default {
  name: 'SelectTemplate',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {
    elImageViewer
  },
  data() {
    return {
      templateRadio: null,
      templateOptions: [],
      activeName: 'first',
      showViewer: false,
      urlList: []
    }
  },
  watch: {
    show(val) {
      this.$emit('update:show', val)
    }
  },
  mounted() {
    console.log('mounted')
  },
  created() {
    console.log('created')
  },
  methods: {
    handleClose() {
      this.$emit('update:show', false)
    },
    getInit() {
      getAction({}, 'EmailTemplate/SelectTemplateList')
        .then((res) => {
          this.templateOptions = res.data.templateOptions
          this.templateOptions.forEach((item, index) => {
            this.templateOptions[index].imageURL = this.getCacheImage(item.key)
          })
        })
    },
    getCacheImage(id) {
      const keyName = 'crm_email_template_id_' + id
      return storage.get(keyName)
    },
    handleSubmit() {
      if (this.templateRadio != null) {
        getAction({}, 'EmailTemplate/GetFieldsById?id=' + this.templateRadio)
          .then((res) => {
            this.$emit('updateTemplate', res.data.templateContent)
            this.$emit('update:show', false)
          })
      } else {
        this.$message({
          message: '请选择模板后提交',
          type: 'warning'
        })
      }
    },
    getTitle(str) {
      if (str.length > 18) {
        return str.substr(0, 15) + '...'
      } else {
        return str
      }
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleChange(value) {
      console.log(value)
    },
    preview(item) {
      this.showViewer = true
      if (item.imageURL) {
        this.urlList = [item.imageURL]
      } else {
        this.urlList = ['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg']
      }
    }
  }

}
</script>

<style scoped>
   .dialog-scrollbar {
    height: 590px;
  }
</style>
